<template>
  <div>
    <el-card class="box-card">
      <div class="button">
        <el-button type="primary" @click="onclickAdd">添加角色</el-button>
      </div>
      <div class="table">
        <el-table :data="list" style="width: 100%" border>
          <el-table-column type="expand">
            <template slot-scope="scope">
              <div>
                <el-row
                  :class="['bt_border', index === 0 ? 'tp_border' : '']"
                  v-for="(item1, index) in scope.row.children"
                  :key="index"
                >
                  <!-- 一级 -->
                  <el-col :span="6">
                    <el-tag closable @close="Roledelete(scope.row, item1.id)">{{
                      item1.authName
                    }}</el-tag>
                    <div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="18">
                    <el-row v-for="item2 in item1.children" :key="item2.id">
                      <!-- 二级 -->
                      <el-col :span="6">
                        <el-tag
                          type="success"
                          closable
                          @close="Roledelete(scope.row, item2.id)"
                        >
                          {{ item2.authName }}
                        </el-tag>

                        <div class="grid-content bg-purple"></div
                      ></el-col>
                      <el-col :span="18">
                        <!-- 三级 -->
                        <el-tag
                          type="warning"
                          closable
                          v-for="item3 in item2.children"
                          :key="item3.id"
                          @close="Roledelete(scope.row, item3.id)"
                        >
                          {{ item3.authName }}
                        </el-tag>

                        <div class="grid-content bg-purple-light"></div
                      ></el-col>
                    </el-row>
                    <div class="grid-content bg-purple-light"></div
                  ></el-col>
                </el-row>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="#" type="index"> </el-table-column>
          <el-table-column label="角色名称" prop="roleName"> </el-table-column>
          <el-table-column label="角色描述" prop="roleDesc"> </el-table-column>
          <el-table-column label="操作" prop="">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="edit(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="remove(scope.row)"
                >删除</el-button
              >
              <el-button
                type="warning"
                icon="el-icon-setting"
                size="mini"
                @click="jurisdiction(scope.row)"
                >分配权限</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 添加弹出框 -->
        <el-dialog title="添加角色" :visible.sync="dialogVisible" width="50%">
          <span>
            <el-form
              :model="from"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="from.roleName"></el-input>
              </el-form-item>
              <el-form-item label="角色描述" prop="roleDesc">
                <el-input v-model="from.roleDesc"></el-input>
              </el-form-item>
            </el-form>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onDetermine">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 编辑弹出框 -->
        <el-dialog
          title="修改角色"
          :visible.sync="editdialogVisible"
          width="50%"
        >
          <span>
            <el-form
              :model="user"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="user.roleName"></el-input>
              </el-form-item>
              <el-form-item label="角色描述" prop="roleDesc">
                <el-input v-model="user.roleDesc"></el-input>
              </el-form-item>
            </el-form>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editdialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="ondetermine">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 分配权限弹框 -->
        <el-dialog
          title="分配权限"
          :visible.sync="AuthorityOfDistribution"
          width="50%"
          @close="close"
        >
          <el-tree
            ref="treeRef"
            :data="RightsData"
            show-checkbox
            node-key="id"
            :default-checked-keys="checkedKeyArr"
            :props="defaultProps"
            default-expand-all
          >
          </el-tree>
          <span slot="footer" class="dialog-footer">
            <el-button @click="AuthorityOfDistribution = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="AllocationRole">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  Rolelist,
  Addroles,
  Editroles,
  Removeuser,
  deleteRoleRightsAPI,
  getTreeRightListsAPI,
  setRightsToRoleAPI,
} from "../../http/api";
export default {
  data() {
    return {
      list: [],
      from: {
        roleName: "",
        roleDesc: "",
      },
      RightsData: [],
      userid: "",
      user: {},
      dialogVisible: false,
      editdialogVisible: false,
      rules: {
        roleName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 2 ~ 8 个字符", trigger: "blur" },
        ],
        roleDesc: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 1 ~ 15 个字符", trigger: "blur" },
        ],
      },
      AuthorityOfDistribution: false,
      currentRoleId: "",
      defaultProps: {
        children: "children",
        label: "authName",
      },
      checkedKeyArr: [], //当前角色拥有权限的id
    };
  },
  created() {
    this.onRolelist();
  },
  methods: {
    // 数据列表
    async onRolelist() {
      const res = await Rolelist();
      console.log(res);
      this.list = res;
    },
    // 添加
    onclickAdd() {
      this.dialogVisible = true;
    },
    async onDetermine() {
      const res = await Addroles(this.from);
      console.log(res);
      this.dialogVisible = false;
      this.onRolelist();
    },
    // 编辑
    edit(row) {
      console.log(row);
      this.user = row;
      this.userid = row.id;
      this.from = row;
      console.log(this.from);
      console.log(this.userid);
      this.editdialogVisible = true;
    },
    async ondetermine() {
      const res = await Editroles(this.userid, this.from);
      console.log(res);
      this.editdialogVisible = false;
      this.onRolelist();
    },
    // 删除
    async remove(row) {
      console.log(row);
      const id = row.id;
      const res = await Removeuser(id);
      console.log(res);
      this.$confirm("您确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.onRolelist();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //删除角色指定权限方法
    async Roledelete(role, rightId) {
      // console.log(role, rightId);
      //调删除角色指定权限接口
      const res = await deleteRoleRightsAPI(role.id, rightId);
      // console.log(res);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          role.children = res;
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 分配权限
    async jurisdiction(row) {
      this.currentRoleId = row.id;
      // console.log(this.currentRoleId);
      const res = await getTreeRightListsAPI(); //权限列表
      console.log(res);
      this.RightsData = res;
      this.getCheckedRigths(row, this.checkedKeyArr);
      this.AuthorityOfDistribution = true;
    },

    getCheckedRigths(node, arr) {
      console.log(node, arr);
      //把当前的id拿过来
      console.log("node:", node);
      if (!node.children) {
        return arr.push(node.id);
      }
      node.children.forEach((item) => this.getCheckedRigths(item, arr));
    },
    //利用弹框监听事件 让当前没数据的为空
    close() {
      this.checkedKeyArr = [];
    },
    //分配权限给某个角色
    async AllocationRole() {
      //全选
      let nodeArr = [
        ...this.$refs.treeRef.getCheckedKeys(), //全选中
        ...this.$refs.treeRef.getHalfCheckedKeys(), //半选中
      ];
      let nodeStr = nodeArr.join(",");
      console.log(nodeStr);
      const res = await setRightsToRoleAPI(this.currentRoleId, {
        rids: nodeStr,
      });
      console.log(res);
      this.onRolelist();
      this.AuthorityOfDistribution = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.button {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.el-tag {
  margin: 5px;
}
.table {
  margin-top: 20px;
}
.bt_border {
  padding: 5px;
  border-bottom: 1px solid #eee;
}
.tp_border {
  border-top: 1px solid #eee;
  padding: 5px;
}
</style>